<template>
	<view class="page">
		<!-- 搜索框 -->
		<view class="searchInput">
			<image class="search_icon" src="https://img-blog.csdnimg.cn/20210316161109714.png"></image>
			<input placeholder="搜索课程"/>
		</view>
		<!-- 新建班级 -->
		<view class="content">
			<view style="display: flex; flex-direction: row;">
				<view class="title">
					<input placeholder="未命名班级" style="font-size: large; margin-left: 280rpx; margin-top: 18rpx;"/>
				</view>
				<image src="../../static/classtitle.png" style="width: 30rpx; height: 30rpx; margin-left: 10rpx; margin-top: 22rpx;"></image>
				<image src="../../static/add.png" style="width: 30rpx; height: 30rpx; margin-top: 22rpx; margin-left: 190rpx;" @click="addlist"></image>
			</view>
			<view class="divider"></view>
			<view class="null">
				<image src="../../static/classnull.png" mode=""></image>
				<view style="justify-content: center; font-size: medium; width: 428rpx; margin-left: 280rpx; margin-top: 70rpx; color: #707070;">暂时没有成员</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.page {
		width: 750rpx;
		/* height: 1334rpx; */
		background-color: #F3F5F7;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		justify-content: center;
		/* justify-content: center; */
	}
	.content {
		width: 750rpx;
		height: 200rpx;
		background-color: #FFFFFF;
		border-radius: 40rpx;
	}
	.divider {
		height: 2rpx;
		width: 100%;
		background-color: #eee;
		margin: 0rpx;
	}
	.searchInput{
		background-color: #fff;
		width: 720rpx;
		height: 80rpx;
		margin-bottom: 30rpx;
		border-radius: 40rpx;
		display: flex;
		padding-left: 30rpx;
		align-items: center;
	}
	.search_icon{
		width: 30rpx;
		height: 30rpx;
		margin-right: 20rpx;
	}
	.title {
		width: 460rpx;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		font-weight: 600;
		border-radius: 40rpx;
		background-color: #fff;
	}
	.null {
		width: 428rpx;
		height: 400rpx;
		display: flex;
		flex-direction: column;

		background-color: #fff;
		color: #707070;
	}
	.null image {
		width: 428rpx;
		height: 240rpx;
		margin-left: 160rpx;
		margin-top: 100rpx;
		justify-content: center;
	}
	
</style>
